<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>宣讲咨询管理</span>
      </div>
    </template>

    <div class="search-form">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="formInline.expertId" placeholder="请选择专家" clearable filterable>
            <el-option v-for="(sItem, sIndex) in expertList" :key="sIndex" :label="sItem.name" :value="sItem.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.content" placeholder="请输入咨询内容" clearable @keyup.enter="onSubmit"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.isAnswer" placeholder="是否已回复" style="width: 100%;" :teleported="false" clearable>
            <el-option label="是" value="1" />
            <el-option label="否" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            :teleported="false"
            v-model="formInline.answerTime"
            type="date"
            clearable
            style="width: 100%;"
            placeholder="请选择回复时间"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">
            <el-icon>
              <Search />
            </el-icon>
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-data" v-loading="loading">
      <el-table
        :data="consultData"
        stripe
        borderresizable
        highlight-hover-row
        show-overflow
        keep-source
        scrollbar-always-on
      >
        <el-table-column
          v-for="(tableItem, tableIndex) in consultTableColumns" :key="tableIndex"
          :prop="tableItem.field"
          :label="tableItem.label"
          :min-width="tableItem.minWidth"
          :formatter="tableItem.formatter"
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column
          fixed="right"
          field="opera"
          label="操作"
          min-width="80"
        >
          <template #default="{ row }">
            <el-button
              type="warning"
              link
              @click="consultDetail(row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-page">
        <el-pagination background layout="prev, pager, next" :total="dataTotal" :page-size="pageSize" :current-page="currentPage" @current-change="currentChange" />
      </div>
    </div>
  </el-card>
</template>
<script>
export default { name: 'backendPublicizeconsult' }
</script>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { http } from '@/utils/http/index';
import { dateFormatter } from "@/utils/backend.js"

/* 路由 */
const route = useRouter();

onMounted(() => {
  getExpertList()
  onSubmit()
})

/* 搜索表单 */
const formInline = ref({
  expertId: "",
  content: "",
  isAnswer: "",
  answerTime: "",
})

/* 专家下拉列表请求 */
const expertList = ref([])
const expertPageIndex = ref(1)
const expertPageSize = ref(1000)
const getExpertList = () => {
  let params = {
    pageIndex: expertPageIndex.value,
    pageSize: expertPageSize.value
  }
  http.$POST(`/TheoryStudyM/GetExpertInfoList`, params).then(res => {
    expertList.value = expertList.value.concat(res.result.dataLst)
    if(res.result.countAll > res.result.pageIndex * res.result.pageSize){
      expertPageIndex.value = expertPageIndex.value + 1
      getExpertList()
    }
  }).catch(err => {
    ElMessage.warning("查询失败")
  })
}

/* 分页 */
const dataTotal = ref(0)
const pageSize = ref(15)
const currentPage = ref(1)

if(route.currentRoute.value.query.currentPage) {
  currentPage.value = Number(route.currentRoute.value.query.currentPage)
}

/* 切换页码方法 */
const currentChange = (val) => {
  currentPage.value = val
  onSubmit()
}

/* 表格数据加载动画 */
const loading = ref(false)

/* 表格数据 */
const consultData = ref([])

/* 表格字段 */
const consultTableColumns = reactive([
  { field: "expertName", label: "专家", minWidth: "120" },
  { field: "content", label: "咨询内容", minWidth: "180" },
  { field: "answer", label: "回复内容", minWidth: "120" },
  { field: "answerTime", label: "回复时间", minWidth: "120", formatter: dateFormatter },
])

/* 列表筛选 */
const onSubmit = () => {
  loading.value = true
  let params = {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
    orderbyCol: "answerTime",
  }
  let dfi = {
    Logic: 0,
    Filters: []
  }

  for (let k in formInline.value){
    if(formInline.value[k]){
      if(k == 'expertId'){
        dfi.Filters.push({
          Field: k,
          Operator: 8,
          Value: formInline.value[k]
        })
      }else if(k == 'content') {
        dfi.Filters.push({
          Field: k,
          Operator: 0,
          Value: formInline.value[k]
        })
      } else if (k == 'isAnswer') {
        if ( formInline.value[k] == '1' ) {
          dfi.Filters.push({
            Field: 'answer',
            Operator: 9,
            Value: ""
          })
        } else {
          dfi.Filters.push({
            Field: 'answer',
            Operator: 8,
            Value: ""
          })
        }
      } else if(k == 'answerTime') {
        dfi.Filters.push({
          Field: k,
          Operator: 15,
          Value: [formInline.value[k], formInline.value[k] ]
        })
      }
    }
  }

  if(dfi.Filters.length){
    params.dfi = dfi
  }
  http.$POST("/PreachM/GetPreachConsultInfoList", params).then(res => {
    loading.value = false
    if (res.isError) return
    consultData.value = res.result.dataLst
    dataTotal.value = res.result.countAll
  }).catch(err => {
    loading.value = false
    ElMessage.warning("查询失败，请重试")
  })
}

/* 查看详情 */
const consultDetail = (row) => {
  let { href } = route.resolve({
    path: "/backend/publicize-consult/detail",
    query: { id: row.id, currentPage: currentPage.value }
  })
  window.open(href, "_blank")
}
</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";
</style>